new Vue({
    el: "#app",
    data: function () {
        return {
            // 技能表
            tables: [

                {
                    name: '影分身之术',
                    printingSequence: ['巳', '卯', '寅'],
                },
                {
                    name: '雷遁·千鸟',
                    printingSequence: ['申', '戌', '未'],
                },
                {
                    name: '土遁·裂土转掌',
                    printingSequence: ['戌', '辰', '丑', '巳'],
                },
                {
                    name: '火遁·凤仙花爪红',
                    printingSequence: ['丑', '寅', '巳', '申'],
                },
                {
                    name: '水遁·水分身之术',
                    printingSequence: ['子', '戌', '亥', '午'],
                },
                {
                    name: '土遁·土流壁',
                    printingSequence: ['亥', '未', '戌', '寅'],
                },
                {
                    name: '水遁·大瀑布之术',
                    printingSequence: ['巳', '未', '申', '戌', '亥'],
                },
                {
                    name: '风遁·螺旋手里剑',
                    printingSequence: ['寅', '卯', '辰', '巳', '午', '未', '申'],
                },
                {
                    name: '火遁·豪火球之术',
                    printingSequence: ['未', '巳', '戌', '辰', '巳', '午', '未', '子', '申', '辰', '寅'],
                },
                {
                    name: '水遁·水龙弹之术',
                    printingSequence: ['申', '子', '辰', '午', '申', '戌', '亥', '寅', '巳', '未', '卯', '子', '辰', '申', '午', '申', '子', '辰', '午', '申', '寅', '巳', '亥', '戌', '未', '子', '申', '辰', '午', '亥', '戌', '未', '子', '申', '辰', '午', '申'],
                },
            ],
            // 按键表
            keyMap: {
                "子": { keyName: "1", keyCode: 'Numpad1' },
                "丑": { keyName: "2", keyCode: 'Numpad2' },
                "寅": { keyName: "3", keyCode: 'Numpad3' },
                "卯": { keyName: "4", keyCode: 'Numpad4' },
                "辰": { keyName: "5", keyCode: 'Numpad5' },
                "巳": { keyName: "6", keyCode: 'Numpad6' },
                "午": { keyName: "7", keyCode: 'Numpad7' },
                "未": { keyName: "8", keyCode: 'Numpad8' },
                "申": { keyName: "9", keyCode: 'Numpad9' },
                "酉": { keyName: "0", keyCode: 'Numpad0' },
                "戌": { keyName: "+", keyCode: 'NumpadAdd' },
                "亥": { keyName: "-", keyCode: 'NumpadSubtract' },
            },
            nowPrintings: [],
            lastInputTime: 0
        }
    },
    mounted() {
        // 监听按键，增加结印
        window.addEventListener("keydown", (event) => {
            const keyCode = event.code
            const printing = Object.keys(this.keyMap).find(key => this.keyMap[key].keyCode === keyCode)
            if (printing) {
                this.nowPrintings.push(printing)
                this.lastInputTime = new Date().getTime()
            }
        })
        // 定时器触发技能或者取消技能（如果与上一次的按键时间超过1秒钟，触发技能或者取消技能）
        setInterval(() => {
            let now = new Date().getTime()
            if (now - this.lastInputTime > 500 && this.nowPrintings.length > 0) {
                this.sendSkill()
            }
        }, 100)
    },
    methods: {
        sendSkill() {
            // 检索技能表，看是否有匹配的技能，如果有释放技能，否则输出结印错误
            const skill = this.tables.find(skill => JSON.stringify(skill.printingSequence) === JSON.stringify(this.nowPrintings))
            if (skill) {
                alert(skill.name)
            } else {
                alert('结印错误')
            }
            // 清空结印
            this.nowPrintings = []
        }

    }
})